Purpose

• ...
  This pull request improves the rendering and readability of JSON and Python-dict style data in agent and streaming messages, and enhances the UI for displaying rich content in chat messages. The key changes include the introduction of a utility for detecting and formatting JSON blocks, improved Markdown rendering for chat messages, and UI refinements for images and message containers.

JSON/Python-dict Formatting and Rendering Improvements:

• Added a new utility module jsonFormatter.ts that detects JSON and Python-dict style blocks in text and renders them as readable Markdown bullet lists, supporting both strict JSON and Python-like syntax (e.g., single quotes, True/False/None). This prevents raw JSON from appearing in the UI and improves message clarity.
• Integrated formatJsonInText into both StreamingAgentMessage and StreamingBufferMessage components so that any detected JSON/dict blocks in agent or streaming messages are automatically formatted for readability. [1] [2] [3] [4]

Markdown and UI Rendering Enhancements:

• Improved Markdown rendering for agent and streaming messages by customizing the rendering of paragraphs, headings, lists, blockquotes, and images, ensuring consistent spacing, font sizes, and alignment. [1] [2] [3]
• Enhanced image rendering in agent and streaming messages to ensure images are displayed responsively and with consistent styling (e.g., full width, rounded corners, proper containment). [1] [2] [3] [4] [5]
• Improved the image download button logic to handle CORS restrictions and provide a fallback for direct downloads, ensuring users can reliably download images from agent messages.

UI/UX Refinements:

• Adjusted the layout and sizing of message containers in StreamingAgentMessage and StreamingPlanResponse for better alignment and to prevent overflow issues. [1] [2]
• Modified the chat UI to hide streaming plan updates while an approval prompt is pending, ensuring the approval action is presented at the correct step in the user flow.

Does this introduce a breaking change?

• Yes
• [x ] No

How to Test

• Get the code

git clone [repo-address]
cd [repo-name]
git checkout [branch-name]
npm install

• Test the code

What to Check

Verify that the following are valid

• ...

Other Information